<template>
    <div>
        <CheckItem :show.sync="checkItemModal" :data="checkItem" @save="saveCheckItem" :model="itemType" :itemID="itemID" id="check-item2"></CheckItem>
        <modal id="super-search-calendar" :show.sync="showCalendarModal" :dialogCSS="{'width': '80%'}">
            <template slot="header">
                {{origin.physical_room_id}}
            </template>
            <template slot="body">
                <PhysicalRoomCalendar :pid="origin.physical_room_id"></PhysicalRoomCalendar>
            </template>
            <template slot="footer">
                <div></div>
            </template>
        </modal>
        <modal id="super-search-issue-step" :show.sync="showIssueStepModal" :dialogCSS="{'width': '70%'}">
            <template slot="header"></template>
            <template slot="body">
                <issue-step v-if="itemType === 'Issues'" :title="this.origin.title" :loading="showIssueStep"
                            :desc="this.origin.message" :steps="steps" :id="this.origin.id" :done="this.origin.hidden" :destory="!showIssueStepModal"></issue-step>
            </template>
            <template slot="footer">
                <div></div>
            </template>
        </modal>
        <nav class="navbar navbar-default navbar-static-top m-b-0">
            <div class="navbar-header">
                <div class="top-left-part">
                    <img src="@/static/img/funkey-logo.png" alt="home" class="dark-logo m-l-20" height="50"
                         style="cursor:pointer;"
                         @click="$router.push('/')"
                    />
                </div>
                <!-- Search input and Toggle icon -->
                <ul class="nav navbar-top-links navbar-left pull-left">
                    <li class="dropdown hide-menu" v-if="messages.length">
                        <a class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" href="#"> <i
                                class="fif fif-message"></i>
                            <div class="notify"><span class="heartbit"></span> <span class="point"></span></div>
                        </a>
                        <ul class="dropdown-menu mailbox animated fadeInDown">
                            <li>
                                <div class="drop-title">You have <span style="color: red !important;">{{messages.length}}</span>
                                    new messages
                                </div>
                            </li>
                            <li>
                                <div class="message-center">
                                    <a :key="'message' + index"  href="javascript:void(0)" v-for="(message, index) in messages"
                                       @click="showMessage(message)">
                                        <div class="mail-contnet">
                                            <h5>{{message.subject}}</h5>
                                            <span class="mail-desc">{{message.text}}</span>
                                            <span class="time">{{formatTime(message.time)}}</span>
                                        </div>
                                    </a>
                                </div>
                            </li>
                        </ul>
                        <!-- /.dropdown-messages -->
                    </li>
                    <!-- .Task dropdown -->
                    <li class="dropdown  hidden-xs" v-if="JSON.stringify($store.state.issues_num) !== '{}'">
                        <a class="dropdown-toggle waves-effect wav$store.state.overflow.issues_numes-light"
                           data-toggle="dropdown" href="#">
                            <i class="fif fif-notification-sys"></i>
                            <div class="notify"><span class="heartbit"></span><span class="point"></span></div>
                        </a>
                        <ul class="dropdown-menu dropdown-tasks animated fadeInDown">
                            <li :key="'issuenum' + key"  v-for="(value, key) in $store.state.issues_num" @click="toIssues(key)"
                                style="border-bottom: 1px solid #e5e5e5;">
                                <a href="javascript:void(0);">
                                    <div>
                                        <p class="m-0">
                                            <strong>{{key}}</strong>
                                            <span class="pull-right label label-danger">{{value}}</span>
                                        </p>
                                    </div>
                                </a>
                            </li>
                            <li @click="toIssues('AUTO_MAIL')">
                                <a class="text-center" href="javascript:void(0);"> <strong>See All Issues</strong> <i
                                        class="fif fif-angle-right"></i> </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-top-links navbar-right pull-right">
                    <li>
                        <div role="search" class="app-search-wrapper m-r-10">
                            <div class="app-search">
                                <input type="text" placeholder="Search..." class="form-control" v-model="keyWord"
                                       @input="_onSearch(keyWord)" @focus="showSearchList = true" @click.stop
                                >
                                <a href="javascript:void(0)" @click="search" @click.stop
                                ><i class="fif fif-search"></i></a>
                            </div>
                            <div class="search-list">
                                <Loading :show="loading" :r="10"></Loading>
                                <SearchList v-show="keyWord.length && showSearchList" :data="results"
                                            @select="selectItem"></SearchList>
                            </div>
                            <div class="search-result" v-show="showSearchResult">
                                <Loading :show="itemLoading" :r="10"></Loading>
                                <div style="background-color: #2cabe3;height: 30px;line-height: 30px;color: #fff;text-indent: 10px;">
                                    {{selectedTitle}}
                                </div>
                                <div class="search-result-content">
                                    <ItemForm :value="item" :action="action"></ItemForm>
                                </div>
                                <div class="pull-right" style="margin: 10px;">
                                    <button type="button" class="btn btn-default btn-outline btn-circle btn-md m-r-5"
                                            @click="prevSelect"
                                            v-show="searchRoute.length > 1"
                                    >
                                        <i class="fif fif-cc-arrow-left"></i>
                                    </button>

                                    <button v-if="itemType === 'Issues'"
                                            type="button"
                                             class="btn btn-primary btn-outline btn-circle btn-md m-r-5" v-tooltip.top="`Add Comment`"
                                            @click="addComment"
                                    >
                                        <i class="fif fif-add-remark"></i>
                                    </button>

                                    <button v-if="itemType === 'PhysicalRoom'"
                                            type="button"
                                            class="btn btn-info btn-outline btn-circle btn-md m-r-5" v-tooltip.top="`Calendar`"
                                            @click="showCalendarModal = true"
                                    >
                                        <i class="fif fif-calendar"></i>
                                    </button>

                                    <button v-if="['PhysicalRoom', 'Order', 'LogicalRoom', 'Host'].indexOf(itemType) !== -1"
                                            type="button"
                                            class="btn btn-primary btn-outline btn-circle btn-md m-r-5" v-tooltip.top="`CheckList`"
                                            @click="_checkList()"
                                    >
                                        <i class="fif fif-check_list-border"></i>
                                    </button>

                                    <button v-if="itemType === 'Issues'"
                                            type="button"
                                             class="btn btn-info btn-outline btn-circle btn-md m-r-5" v-tooltip.top="`Process`"
                                             @click.stop="getIssueStep()">
                                        <i class="fif fif-process"></i>
                                    </button>

                                    <button type="button" class="btn btn-success btn-outline btn-circle btn-md m-r-5"
                                            @click="confirmSubmit"
                                    >
                                        <i class="fif fif-check"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger btn-outline btn-circle btn-md m-r-5"
                                            @click="showSearchResult = false">
                                        <i class="fif fif-close"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li >
                      <div class="app-search-wrapper m-r-10">

                        <el-badge :value="taskTotalCount" :max="99" class="item">
                          <el-popover
                            placement="top-start"
                            width="300"
                            trigger="hover">
                            <el-row v-for="row in taskDataList">
                              <el-col :span="24">
                                <div class="wrap-task-item" v-if="row.numIndex < 5">
                                  <span >{{row.taskName}}</span>
                                  <el-tag type="danger" class="el-tag-cls">{{row.count}}</el-tag>
                                </div>
                                <div class="wrap-task-item triger-action" v-show="row.numIndex == 5" @click="viewTasks(row.numIndex)">
                                  <strong>{{row.taskName}}</strong>
                                </div>
                                <div class="wrap-task-item triger-action" style="text-align: center;" v-show="row.numIndex == 6" @click="viewTasks(row.numIndex)">
                                  <strong>{{row.taskName}}</strong> <i class="el-icon-arrow-right"></i>
                                </div>
                              </el-col>
                            </el-row>
                          <el-button  slot="reference" class="el-icon-message-solid cls-notify-count " :class="{'notify-animation' :taskTotalCount>0}" ></el-button>
                          </el-popover>
                        </el-badge>

                      </div>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#">
                            <b class="hidden-xs">
                                {{`${$store.state.user}(${$store.state.token})`}}
                            </b><span class="caret"></span> </a>
                        <ul class="dropdown-menu dropdown-user animated flipInY">
                            <li><a href="javascript:void (0)" @click="_logout"><i class="fif fif-logout"></i>
                                Logout</a>
                            </li>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                    <!-- /.dropdown -->
                </ul>
            </div>
            <!-- /.navbar-header -->
            <!-- /.navbar-top-links -->
            <!-- /.navbar-static-side -->
        </nav>
    </div>

</template>

<script>
    import Vue from 'vue'
    import Modal from '@/components/widgets/Modal'
    import IssueStep from '@/components/widgets/IssueStep'
    import SearchList from '@/components/widgets/SearchList'
    import Loading from '@/components/widgets/Loading'
    import ItemForm from '@/components/widgets/ItemForm.vue'
    import {logout, getAnnouncements, getIssues,getTasksNotify} from '@/api/auth'
    import {addModel, listModel, getModel, updateModel, searchModel} from "@/api/model";
    import {generalSearch} from "@/api/auth";
    import {loadSeenNotifications, saveSeenNotifications} from "@/cache";
    import {debounce, l2o} from '@/utils'
    import columns from '@/config/columns'
    import config  from '@/config'
    import {deleteSuperSearch, saveSuperSearch} from '@/cache'
    import {getRoomEvents} from '@/api/event'
    import CheckItem from '@/components/widgets/CheckItem'
    import {checkListMixin} from "@/mixins/item";
    import PhysicalRoomCalendar from "@/components/views/PhysicalRoomCalendar"
    //import moment from 'moment'
    import swal from 'sweetalert'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    export default {
        name: "MyHeader",
        components: {Modal, SearchList, Loading, ItemForm, IssueStep, CheckItem, PhysicalRoomCalendar},
        mixins: [checkListMixin],
        data() {
            return {
                itemID: null,
                itemType: null,
                showSearchList: false,
                showSearchResult: false,
                loading: false,
                keyWord: '',
                messages: [],
                show: false,
                currentMessage: '',
                issues: {},
                results: {},

                selectedTitle: '',
                itemLoading: false,
                item: null,
                action: 'edit',

                searchRoute: [],

                showIssueStep: false,
                showIssueStepModal: false,
                origin: {},
                steps: [],

                showCalendarModal: false,
                taskTotalCount:0,//FunTask 总条数
                taskDataList:[] //加载FunTask 数据
            }
        },
        created() {
            this.translation = {
                PhysicalRoom: 'PhysicalRoom',
                Order: 'Order',
                LogicalRoom: 'LogicalRoom',
                Host: 'Host',
                Issues: 'Issues'
            }

            this.groups = config.GROUPS
        },
        mounted() {
          const _this = this;
          this._getTasksNotify();
          window.setInterval(()=>{
            _this._getTasksNotify();
          },1000*60);
            // 获取issue通知，显示未完成的issue
            getAnnouncements().then(res => {
                let seenID = loadSeenNotifications()
                res.data.forEach(item => {
                    if (seenID.indexOf(item.id) === -1) {
                        this.messages.push(item)
                    }
                })
            })

            this.$store.dispatch("setIssueNum")
            // 获取所以issue类型
            listModel("issues").then(response => {
                this.types = response.data
                this.$store.commit('SET_ISSUES_TYPE', response.data)
            })

            $(document).on('click', (e) => {
                if (!$(e.target).hasClass('collapse-btn') &&　!$(e.target).hasClass('group-title')) this.showSearchList = false
            })
        },
        methods: {
          /**
           * 查看消息通知
           * */
          viewTasks(actionType){
            console.log("viwTasks,actionType="+actionType);
            const pars = {actionType:actionType};
            let routeUrl = this.$router.resolve({ //当参数不相同时，总会触发目标页面的 watch 监听 "$route"
              path: "/FunkeyWorkerTaskList",
              query: pars
            });
            window.open(routeUrl.href, '_self');
          },
          /**
           * 获取 Fun WorkTask Notify 结果
           * @Date 2020.02.29 14:09
           */
          _getTasksNotify(){
            this.taskDataList = [];
            getTasksNotify().then(resp => {
              if(!resp.data || !resp.data.data) return;
              const _data = resp.data.data;
              this._fillTaskDataList(_data);
            }).catch(err => {
              console.log("_getTasksNotify.failure ...");
              console.log(err);
            });
          },
          _fillTaskDataList(_data){
            const _submittedCount = _data["2"] || 0;
            const _pendingCount = _data["0"] || 0;
            const _successCount = _data["1"] || 0;
            const _failedCount = _data["9"] || 0;
            this.taskTotalCount = _submittedCount + _pendingCount + _successCount + _failedCount;
            this.taskDataList.push({numIndex:'1',taskName:"Submitted Tasks", count: _submittedCount});
            this.taskDataList.push({numIndex:'2',taskName:"Pending Tasks", count: _pendingCount});
            this.taskDataList.push({numIndex:'3',taskName:"Success Tasks", count: _successCount});
            this.taskDataList.push({numIndex:'4',taskName:"Failed Tasks", count: _failedCount});
            this.taskDataList.push({numIndex:'5',taskName:"Detail", count: 0});
            this.taskDataList.push({numIndex:'6',taskName:"See All Issues ", count: 0});
          },
            prevSelect() {
                let nowSelect = this.searchRoute[0]
                this.searchRoute = deleteSuperSearch(nowSelect)
                this.itemID = this.searchRoute[0].id
                this.itemType = this.searchRoute[0].type
                this.fetch(this.searchRoute[0].id, this.searchRoute[0].type)
            },
            fetch(id, type) {
                this.itemLoading = true

                getModel(type, null, {id}).then(res => {
                    this.itemLoading = false
                    this.origin = res.data.list[0]
                    let item = []
                    let defaultColumns = columns[type]

                    // only self okumasan order can edit
                    let isOkumasn = false
                    for (let key in this.origin) {
                        if (key === 'heyakun_order' && !this.origin['heyakun_order']) {
                            isOkumasn = true
                            break;
                        }
                    }

                    if (type === 'PhysicalRoom') {
                        this.selectedTitle = `PhysicalRoom${this.origin.physical_room_id}`
                    } else if (type === 'LogicalRoom') {
                        this.selectedTitle = `LogicalRoom${this.origin.logical_room_id}`
                    } else if (type === 'Host') {
                        this.selectedTitle = `Host${this.origin.host_name}`
                    } else if (type === 'Order') {
                        this.selectedTitle = `Order${this.origin.reservation_code}`
                    } else if (type === 'Issues') {
                        this.selectedTitle = `Issues${this.origin.id}`
                    }

                    for (let i = 0; i < defaultColumns.length; i++) {
                        let column = defaultColumns[i]
                        if (column.type !== 'actions' && column.type !== 'serial') {
                            let newItem = $.extend({}, column, true)
                            newItem.value = this.origin[column.key]
                            if (isOkumasn && column.key === 'checkout') {
                                newItem.edit = true
                            }

                            item.push(newItem)
                        }
                    }

                    for (let i = 0; i < item.length; i++) {
                        if (item[i].inputType === 'select' && item[i].multiple) {
                            item[i].value = item[i].value && item[i].value.length > 0 ? item[i].value.split(';') : []
                        }

                        if (item[i].inputType === 'reversecheckbox') {
                            item[i].value = !item[i].value
                        }

                        if (item[i].labelKey) {
                            item[i].defaultLabel = this.origin[item[i].labelKey]
                        }

                        if (item[i].inputType === 'box') {
                            if (item[i].value) {
                                let arr = item[i].value.split(':')
                                if (arr.length > 1) {
                                    let index = config.CONTACT_TOOLS.indexOf(arr[0])
                                    if (index !== -1) {
                                        item[i].selectedVal = config.CONTACT_TOOLS[index]
                                        item[i].value = arr[1]
                                    } else {
                                        item[i].selectedVal = 'other'
                                    }

                                } else {
                                    item[i].selectedVal = 'other'
                                }
                            }
                        }


                        if (item[i].inputType === 'money') {
                            item[i].currencyVal = this.origin[item[i].currencyKey]
                        }

                        if (item[i].inputType === 'datetime') {
                            item[i].value = item[i].value ? item[i].value.split(' ')[0] : ''
                        }
                    }

                    this.item = item

                }).catch(e => {
                    console.log(e)
                    this.itemLoading = false
                })
            },
            _getGroupLabel(current_group_id) {
                let newGroup = ''
                this.groups.forEach(item => {
                    if (item.value == current_group_id) newGroup = item.label
                })
                return newGroup
            },
            _getComments(start, end ,comments) {
                let result = []
                comments.forEach( item => {
                    if (end) {
                        if (item.date >= start && item.date < end) result.push(item)
                    } else {
                        if (item.date >= start) result.push(item)
                    }
                } )
                return result
            },
            _stepOrder(firstStep, steps) {
                let child = firstStep.child
                let tmp = []
                while (child) {
                    let tmpChild = null
                    for (let i = 0; i < steps.length; i++) {
                        if (child == steps[i].id) {
                            tmp.push(steps[i])
                            tmpChild = steps[i].child
                        }
                    }
                    child = tmpChild
                }
                return tmp
            },
            _checkList() {
                let props = {}
                props.item = this.currentItem
                this.checkList(props, this.itemType)
            },
            getIssueStep() {
                this.showIssueStepModal = true
                searchModel('IssueStep', {
                    page: 1,
                    search_keys: {
                        issue_id: this.itemID
                    }
                }, null).then(res => {
                    let firstStep = null
                    let tmp = []
                    this.steps = []
                    for (let i = 0; i < res.data.list.length; i++) {
                        if (!res.data.list[i].parent) {
                            firstStep = res.data.list[i]
                            tmp.push(firstStep)
                        }
                        res.data.list[i].groupLabel = this._getGroupLabel(res.data.list[i].group)
                    }

                    if (firstStep) {
                        tmp = tmp.concat(this._stepOrder(firstStep, res.data.list))
                    }
                    this.showIssueStep = true
                    searchModel('IssueComment', {
                        page: 1,
                        search_keys: {
                            issue_id: this.itemID
                        }
                    }, null).then( (res) => {
                        tmp.forEach( (item, index) => {
                            let start = item.date
                            let end = index >= tmp.length - 1 ? null : tmp[ index + 1 ].date
                            tmp[index].comments = this._getComments(start, end, res.data.list)
                        })

                        this.steps = tmp
                        this.showIssueStep = false
                    } )

                }).catch(e => {
                    console.log(e)
                    this.showIssueStep = false
                })
            },
            addComment() {
                let textarea = document.createElement("textarea");
                textarea.rows = "4"
                textarea.className = "form-control reply-template"
                textarea.value = ""
                swal({
                    content: textarea,
                    icon: 'info',
                    button: {
                        text: "Add",
                        closeModal: true,
                    },
                }).then((value) => {
                    if (value && textarea.value.length) {
                        addModel("IssueComment", {
                            text: textarea.value,
                            author: this.$store.state.user,
                            issue: this.itemID
                        }).then(res => {
                            $.toast({
                                heading: 'success',
                                position: 'top-center',
                                icon: 'success',
                            });
                        }).catch(e => {
                        })
                    }

                })
            },
            selectItem(item) {
                this.itemID = item.id
                this.itemType = item.type
                this.showSearchResult = true
                this.searchRoute = saveSuperSearch({id: item.id, type: item.type})
                this.currentItem = item
                this.item = []
                this.fetch(item.id, item.type)
            },
            confirmSubmit() {
                if (this.itemType && this.itemID) {
                    this.value = this.item
                    for (let i = 0; this.value && i < this.value.length; i++) {
                        let value = this.value[i].value && typeof this.value[i].value == 'object' ? this.value[i].value.value : this.value[i].value
                        if (this.value[i].required && String(value).trim().length === 0 && this.value[i].name !== 'password') {
                            return $.toast({
                                heading: 'Wrong',
                                text: 'You must fill fields with *',
                                position: 'top-right',
                                loaderBg: '#ff6849',
                                icon: 'error'
                            });
                        }
                    }
                    let v = []
                    if (this.value) {
                        $.extend(true, v, this.value)
                    }
                    let currency = []
                    for (let i = 0; i < v.length; i++) {

                        v[i].key = v[i].updateKey ? v[i].updateKey : v[i].key

                        if (v[i] && v[i].inputType === 'select' && v[i].multiple) {
                            v[i].value = v[i].value instanceof Array ? v[i].value.join(';') : v[i].value
                        }

                        v[i].value = !v[i].value && v[i].hasOwnProperty('defaultValue') ? v[i].defaultValue : v[i].value

                        if (v[i] && v[i].inputType === 'money') {
                            currency.push({
                                key: v[i].currencyKey,
                                value: v[i].currencyVal
                            })
                        }

                        if (v[i] && v[i].inputType === 'datetimepicker' && v[i].value) {
                            v[i].value = moment(v[i].value).utc().format('YYYY-MM-DD HH:mm:ss')
                        }

                        if (v[i] && v[i].inputType === 'box') {
                            if (v[i].selectedVal !== 'other') {
                                v[i].value = v[i].selectedVal + ':' + v[i].value
                            }
                        }

                        if (v[i] && v[i].inputType === 'weekdayTimePicker') {
                            delete v[i]
                        }

                        if (v[i] && v[i].inputType === 'user') {
                            v[i].value = v[i].value.length ? v[i].value : this.$store.state.user
                        }

                        if (v[i] && v[i].inputType === 'upload') {
                            v[i].value = undefined
                            if (this.file) {
                                this.$emit('upload', v[1].value, this.file)
                                $("#file").val('')
                            }
                        }
                        if (v[i].inputType === 'reversecheckbox') {
                            v[i].value = !v[i].value
                        }

                        if (v[i].inputType === 'datetime') {
                            v[i].value = v[i].value + ' 12:00:00'
                        }
                    }

                    if (currency.length) {
                        v = v.concat(currency)
                    }

                    let attr = l2o(v, 'key')
                    if (attr && this.origin) {
                        for (let key in attr) {
                            if (key === 'gentime' && this.origin[key] && attr[key] &&
                                this.origin[key].split(' ')[0] === attr[key].split(' ')[0]) {
                                delete attr[key]
                            }
                            else if (this.origin[key] === attr[key]) {
                                delete attr[key]
                            } else if (key === 'password' && attr[key] === '') {
                                delete attr[key]
                            }
                        }
                    }

                    this.itemLoading = true
                    updateModel(this.itemType, this.itemID, attr).then(res => {
                        this.itemLoading = false
                        swal("success", "", "success")
                        this.fetch(this.itemID, this.itemType)
                    }).catch(e => {
                        this.itemLoading = false
                    })
                }
            },
            _onSearch: debounce(function (keyword) {
                if (keyword) {
                    this.loading = true
                    generalSearch(keyword).then(res => {
                        this.loading = false
                        this.results = {}
                        res.data.forEach(item => {
                            (this.results[this.translation[item.type]] || (this.results[this.translation[item.type]] = [])).push(item)
                        })
                    }).catch(e => {
                        this.loading = false
                    })
                } else {
                    this.results = {}
                }
            }, 500),
            _logout() {
                logout().then(res => {
                    this.$store.commit('SET_USER', null)
                    this.$store.commit('SET_TOKEN', null)
                    this.$router.push({path: '/login'})
                })
            },
            search() {
                if (this.keyWord) {
                    this.loading = true
                    this.showSearchList = true
                    generalSearch(this.keyWord).then(res => {
                        this.loading = false
                        this.results = {}
                        res.data.forEach(item => {
                            (this.results[item.type] || (this.results[item.type] = [])).push(item)
                        })
                    }).catch(e => {
                        this.loading = false
                        this.showSearchList = false

                    })
                } else {
                    this.results = {}
                }
            },
            toIssues(key) {
                this.$router.push(`/issues/${key}`)
            },
            formatTime(time) {
                return moment(time).fromNow()
            },
            showMessage(msg) {
                this.currentMessage = msg
                let seenID = saveSeenNotifications(msg.id)
                let tmp = []
                this.messages.forEach(item => {
                    if (seenID.indexOf(item.id) === -1) {
                        tmp.push(item)
                    }
                })
                this.messages = tmp
                swal({
                    'title': msg.subject,
                    'text': msg.text,
                    'icon': 'info'
                })
            }
        },
        watch: {}
    }
</script>

<style lang="stylus" scoped>
    .app-search-wrapper
        position: relative;
        .search-list
            position: absolute;
            left: 0;
            top: 50px;
            width: 300px;
            z-index: 11;
        .search-result
            position: absolute;
            right: 0;
            top: 50px;
            background-color: #fff;
            border: 1px solid #ddd;
            z-index: 10;
            .search-result-content
                padding: 10px;
                width: 40vw;
                box-sizing: border-box;
                max-height: 500px;
                min-height: 100px;
                overflow-x: hidden;
                overflow-y: auto;

    .item {
      margin-top: 15px;
      margin-right: 5px;
    }

    @keyframes icon-bounce {
    0%,100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }

    25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    }

    50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
    }

    75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    }

    85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
    }
    }
    @-webkit-keyframes icon-bounce {
      0%, 75%, 100% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      80% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }

      85% {
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
      }

      90% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
      }

      95% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
      }
    }
    @-moz-keyframes icon-bounce {
      0%, 100% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      25% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }

      50% {
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
      }

      75% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
      }

      85% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
      }
    }
    @-o-keyframes icon-bounce {
      0%, 100% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      25% {
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }

      50% {
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
      }

      75% {
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
      }

      85% {
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
      }
    }

    .cls-notify-count{
      color:white;
      font-size: 28px;
      width: 32px;
      height: 32px;
      margin: 0px;
      padding: 0px;
      background-color: #1E88E5;
      border: none;

    }

    .notify-animation{
     -webkit-animation: icon-bounce 4s infinite;
     -moz-animation: icon-bounce 0.5s infinite;
     -o-animation: icon-bounce 0.5s infinite;
      animation: icon-bounce 0.5s infinite;
    }

    .wrap-task-item{
      width: 250px;line-height: 45px;
      border-bottom :1px solid #ECECEC;
    }

    .wrap-task-item span{
      float:left;font-size: 20px  Extra large;
      word-spacing :2px;
    }

    .wrap-task-item .el-tag-cls{
      float:right;margin-right: 10px;margin-top :10px;line-height: 24px;height: 24px;
    }

  .wrap-task-item strong{
    font-size 16px;
  }

  .triger-action{
    cursor:pointer;
    border-top :1px solid #ECECEC;
  }
</style>
